<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">

          <a-col :md="6" :sm="12">
            <a-form-item :label="$t('base.name')">
              <j-input :placeholder="$t('base.pleaseEnter')" v-model="queryParam.name"></j-input>
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search"> {{$t('base.query')}} </a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px"> {{$t('base.reset')}} </a-button>
            </span>
          </a-col>

        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="plus"> {{$t('base.add')}} </a-button>
      <a-button  @click="publishColunm" type="primary" icon="plus">{{$t('base.publish')}}</a-button>
      <a-button  @click="ledOpenOrClose('Y',this.$t('led.isOpen'))" type="primary" icon="plus">{{$t('led.open')}}</a-button>
      <a-button  @click="ledOpenOrClose('N',this.$t('led.isClose'))" type="primary" icon="plus">{{$t('led.close')}}</a-button>
      <a-button type="primary"  @click="brightnessSet" icon="bulb">{{$t('led.setBrightness')}}</a-button>
      <a-button  @click="batchDel" type="primary" icon="delete">{{$t('base.del')}}</a-button>
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> {{$t('base.selected')}} <a style="font-weight: 600">{{selectedRowKeys.length }}</a> {{$t('base.item')}}
        <a style="margin-left: 24px" @click="onClearSelected">{{$t('base.clear')}}</a>
      </div>

      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{fixed:true,selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"

        @change="handleTableChange">

        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无此图片</span>
          <img v-else :src="getImgView(text)" height="25px" alt="图片不存在"
               style="max-width:80px;font-size: 12px;font-style: italic;"/>
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无此文件</span>
          <a-button
            v-else
            :ghost="true"
            type="primary"
            icon="download"
            size="small"
            @click="uploadFile(text)">
            下载
          </a-button>
        </template>

        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">{{$t('base.edit')}}</a>
          <a-divider type="vertical"/>
           <a @click="resourceShow(record)"><a-icon type="setting"/>{{$t('led.Programresources')}}</a>
          <a-divider type="vertical"/>
          <a @click="ledShow(record)"><a-icon type="setting"/>{{$t('led.led')}}</a>
          <a-divider type="vertical"/>
           <a @click="previewImgShow(record)"><a-icon type="setting"/> 预览节目</a>
          <a-divider type="vertical"/>
          <a-dropdown>
            <a class="ant-dropdown-link">{{$t('base.more')}} <a-icon type="down"/></a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a-popconfirm :title="$t('base.confirmDelete')" @confirm="() => handleDelete(record.id)">
                  <a>{{$t('base.del')}}</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>

      </a-table>
    </div>

    <glrColumn-modal ref="modalForm" @ok="modalFormOk"></glrColumn-modal>
    <glr-led-member-resource-list ref="glrLedMemberResourceList"></glr-led-member-resource-list>
    <glr-led-member-led-list ref="glrLedMemberLedList"></glr-led-member-led-list>

    <a-modal
      :title="brightnessSetTitle"
      :visible="brightnessSetVisible"
      :confirmLoading="brightnessSetConfirmLoading"
      @ok="brightnessSetHandleOk"
      @cancel="brightnessSetHandleCancel">
      <div style="width: 100%">
        {{$t('base.setBrightness')}}:<a-slider id="vol_Id" :disabled="disabledValue" :step="5" :defaultValue="0" v-model="brightnessValue"/>
        <a-checkbox @change="checkBoxOnChange">{{$t('led.automaticBrightnessAccordingToIllumination')}}</a-checkbox>
      </div>
    </a-modal>

    <img-viewer ref="viewer"/>
  </a-card>
</template>

<script>

  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
  import GlrColumnModal from './modules/GlrColumnModal'
  import GlrLedMemberResourceList from "./GlrLedMemberResourceList"
  import GlrLedMemberLedList from "./GlrLedMemberLedList";
  import { httpAction } from '@/api/manage'
  import ImgViewer from "@/components/jeecg/ImgViewer";
  import JInput from '@/components/jeecg/JInput'

  export default {
    name: "GlrColumnList",
    mixins: [JeecgListMixin],
    components: {
      GlrLedMemberLedList,
      GlrColumnModal,
      GlrLedMemberResourceList,
      ImgViewer,
      JInput
    },
    data() {
      return {
        description: '栏目内容管理页面',
        brightnessSetTitle:'亮度设置',
        brightnessSetVisible:false,
        brightnessSetConfirmLoading:false,
        disabledValue:false,
        brightnessValue:0,
        imgList:[],
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: "center",
            customRender: function (t, r, index) {
              return parseInt(index) + 1;
            }
          },
          {
            title: this.$t('base.name'),
            align: "center",
            dataIndex: 'name'
          },
          {
            title: this.$t('base.status'),
            align: "center",
            dataIndex: 'status_dictText'
          },
          {
            title: this.$t('base.startTime'),
            align: "center",
            dataIndex: 'startTime'
          },
          {
            title:this.$t('base.endTime'),
            align: "center",
            dataIndex: 'endTime'
          },
          {
            title: this.$t('base.publishTime'),
            align: "center",
            dataIndex: 'releaseDate',
            customRender: function (text) {
              return !text ? "" : (text.length > 10 ? text.substr(0, 10) : text)
            }
          },
          {
            title: this.$t('base.operation'),
            dataIndex: 'action',
            align: "center",
            scopedSlots: {customRender: 'action'}
          }
        ],
        url: {
          list: "/glr/glrColumn/list",
          delete: "/glr/glrColumn/delete",
          deleteBatch: "/glr/glrColumn/deleteBatch",
          publishColunm: "/glr/glrColumn/publishColunm",
          setBrightnessValue: "/glr/glrColumn/setBrightnessValue",
          previewShow: "/glr/glrColumn/previewShow",
          ledOpenOrClose: "/glr/glrColumn/ledOpenOrClose"

        },
        dictOptions: {},
      }
    },
    computed: {
      importExcelUrl: function () {
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      }
    },
    methods: {
      initDictConfig() {
      },
      resourceShow(record) {
        this.$refs.glrLedMemberResourceList.edit(record, "2");
      },
      ledShow(record) {
        this.$refs.glrLedMemberLedList.edit(record, "1");
      },
      brightnessSet(){
        this.brightnessValue=0;
        this.brightnessSetVisible=true;
      },
      brightnessSetHandleCancel(){
        this.brightnessValue=0;
        this.brightnessSetVisible=false;
      },
      checkBoxOnChange(e){
        if(e.target.checked){
          this.disabledValue=true;
          this.brightnessValue=0;
        }else{
          this.disabledValue=false;
        }
      },
      brightnessSetHandleOk(){
        var ids = "";
        var that = this;
        if (this.selectedRowKeys.length <= 0) {
            this.$message.warning(this.$t('base.pleaseSelectARecord'));
          return;
        } else {
          that.sliderstatus=true;
          for (var a = 0; a < this.selectionRows.length; a++) {
            ids += this.selectionRows[0].id + ",";
          }
          console.info(ids);
          if(!that.sliderstatus){
            return;
          }
          that.loading = true;
          httpAction(that.url.setBrightnessValue, {disabledValue:that.disabledValue,ids: ids,brightness:that.brightnessValue},"post").then((res) => {
            if (res.success) {
              that.brightnessSetHandleCancel();
              that.$message.success(res.message);
              that.loadData();
              that.onClearSelected();

            } else {
              that.$message.warning(res.message);
            }
          }).finally(() => {
            that.sliderstatus=false;
            that.loading = false;
          });
        }
      },

      publishColunm() {
        if (this.selectedRowKeys.length <= 0||this.selectedRowKeys.length > 1) {
            this.$message.warning(this.$t('base.pleaseSelectARecord'));
          return;
        } else {
          var id = this.selectedRowKeys[0];
          var that = this;
          this.$confirm({
            title: this.$t('base.confirm'),
            content: this.$t('led.Identifypublishedresources')+'?',
            onOk: function () {
              that.loading = true;
              httpAction(that.url.publishColunm, {id: id},"post").then((res) => {
                if (res.success) {
                  that.$message.success(res.message);
                  that.loadData();
                  that.onClearSelected();
                } else {
                  that.$message.warning(res.message);
                }
              }).finally(() => {
                that.loading = false;
              });
            }
          });
        }
      },
      ledOpenOrClose:function(status,msg){
          if (this.selectedRowKeys.length <= 0) {
              this.$message.warning(this.$t('base.pleaseSelectARecord'));
              return;
          } else {
              var ids = "";
              for (var a = 0; a < this.selectedRowKeys.length; a++) {
                  ids += this.selectedRowKeys[a] + ",";
              }
              var that = this;
              this.$confirm({
                  title: this.$t('base.confirm'),
                  content: msg,
                  onOk: function () {
                      that.loading = true;
                      httpAction(that.url.ledOpenOrClose, {ids: ids,status:status},"post").then((res) => {
                          if (res.success) {
                              that.$message.success(res.message);
                              that.loadData();
                              that.onClearSelected();
                          } else {
                              that.$message.warning(res.message);
                          }
                      }).finally(() => {
                          that.loading = false;
                      });
                  }
              });
          }
      },

      previewImgShow(record){
        var that=this;
        httpAction(that.url.previewShow, {id: record.id},"post").then((res) => {
          if (res.success) {
            that.imgList=[];
            for(var i=0;i<res.result.length;i++){

             var fileUrl="";
             if(res.result[i].fileType=='.mp4'){
               fileUrl=require('@/assets/logo.png');
             }else{
               fileUrl=res.result[i].filePath;
             }
              that.imgList.push({
                url: fileUrl,
                source: res.result[i].id
              });
            }
            that.$refs.viewer.show(
              that.imgList,0
            );

          } else {
            that.$message.warning(res.message);
          }
        }).finally(() => {
          that.loading = false;
        });
      },
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less'
</style>